<template>
  <div class="tabar">
    <div>
      <div>好又多电商管理系统</div>
      <div>
        <el-icon @click="outCollapse">
          <Menu />
        </el-icon>
      </div>
    </div>
    <div>
      <div>admin</div>
      <div>
        <el-icon>
          <ArrowDown />
        </el-icon>
      </div>
    </div>

  </div>
</template>
  
<script setup lang='ts'>
import { useAdminState } from '@/store/modules/adminUser'
const useState = useAdminState()
function outCollapse() {
  console.log(111);
  useState.Collapse(useState.isCollapse)
}

</script>
  
<style>
.tabar {
  height: 80px;
  background-color: #409eff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding-left: 20px;
}

.tabar div {
  font-size: 26px;
  margin-right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabar :nth-child(2) div {
  font-size: 16px;
  margin-right: 10px;
}
</style>